<template>
  <a-modal
    v-model:visible="visible"
    width="800px"
    :footer="false"
    :hide-title="true"
    :body-style="{padding:0}"
    @close="close"
  >
    <code-mirror
      ref="codemirrorRef"
      v-model="code"
      style="height: 450px;"
      basic
      :lang="lang"
      :extensions="extensions"
    />
    <div class="code-editor-dialog-btn-wrapper">
      <a-button
        type="text"
        size="small"
        @click="visible = false"
      >
        确定
      </a-button>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, defineExpose, defineModel } from 'vue';
import CodeMirror from 'vue-codemirror6';
import { javascript } from '@codemirror/lang-javascript';
import { oneDark } from '@codemirror/theme-one-dark';

const code = defineModel('code', { type: String, default: '' });

const lang = javascript();
const extensions = [oneDark];
const codemirrorRef = ref();

const visible = ref(false);

const open = () => {
  visible.value = true;
};

const close = () => {
  visible.value = false;
};

defineExpose({
  open,
  close
});

</script>

<script lang="ts">
export default {
  name: 'CodeEditor'
};
</script>

<style lang="less">
.cm-editor {
  height: 100%;
}

.code-editor-dialog-btn-wrapper {
  background-color: #282c34;
  width: 100%;
  height: 28px;
  display: flex;
  justify-content: right;
}
</style>